import { React, useState, useEffect } from 'react'
import {Button, Form, Input, Picker, Toast} from 'antd-mobile'
import './receive.css'
import _ from 'lodash'
import {getbankinfo, getInfo, getTeam, receive} from '../request/api'
import { useNavigate } from "react-router-dom";
import { LeftOutline } from 'antd-mobile-icons'
import { useTranslation } from "react-i18next";

export default function Receive() {
    const { t } = useTranslation();
    const navigate = useNavigate();
    const [data, setData] = useState([])
    const [orderMoney, setOrderMoney] = useState()
    const [inputValue1, setInputValue1] = useState('');
    const [inputValue2, setInputValue2] = useState('0.00');//实际到账
    const [inputValue3, setInputValue3] = useState('');
    const [cardList, setCardList] = useState([]);
    const [disableds, setDisableds] = useState(false);
    const getData = async () => {
        Toast.show({
            icon: 'loading',
            content: t('t4'),
            duration: 800
        })
        const res = await getInfo({})
        setData(res.data)
        /*if (res.data.address == '') {
            Toast.show({
                content: t('t10'),
                duration: 2200
            })
            setTimeout(() => {
                navigate('/UserInfo')
            }, 2200);
        }*/
        if (res.data.freeze_balance !== '0.00') {
            //有未完成订单，余额减去订冻结的金额
            setOrderMoney((Number(res.data.balance) - Number(res.data.freeze_balance)).toFixed(2))
        } else {
            //正常余额
            setOrderMoney(Number(res.data.balance));
        }
    }
    const getData1 = async () => {
        const res = await getTeam({})
        setOrderMoney(res.data.commission)
    }
    const balance = (e) => {
        if (orderMoney < 0) {
            setDisableds(true)
        } else if (orderMoney - e.target.value < 0) {
            setInputValue1(orderMoney)
            setInputValue2((Number(orderMoney) - Number(orderMoney) * Number(data.fees)).toFixed(2))
        } else {
            setInputValue1(e.target.value)
            setInputValue2((Number(e.target.value) - Number(e.target.value) * Number(data.fees)).toFixed(2))
        }
    }
    const submit = () => {
        if (data.deal_count < 60){
            return Toast.show({
                icon: false,
                content: t('bz15'),
                duration: 4200
            })
        }
        if (inputValue3.length < 6 || inputValue3.length > 16) {
            Toast.show({
                content: t('t15'),
                duration: 2200
            })
        } else {
            Toast.show({
                icon: 'loading',
                content: t('t4'),
                duration: 800
            })
            withdraw({
                address: data.address,
                num: inputValue1,
                // real_amount: inputValue2,
                paypassword: inputValue3,
                type : 'bank'
            }).then(res => {
                if (res.code == 1) {
                    Toast.show({
                        icon: 'fail',
                        content: res.info,
                        duration: 2200
                    })
                    return false
                }
                Toast.show({
                    icon: 'success',
                    content: t('t16'),
                    duration: 1100
                })
                setTimeout(() => {
                    navigate('/Withdraws')//提现记录页
                }, 1500)
            })
        }
    }

    const getCardList = (v) =>{
        getbankinfo({}).then(res =>{
            if (res.code == 0){
                let data = res.data;
                let list = data.map(v =>{
                    return {
                        label: v.bankname + `(${v.cardnum})`,
                        value: v.id
                    }
                })
                setCardList(list)
            }
        })
    }
    const onFinish = (v)=>{
        Toast.show({
            icon: 'loading',
            content: t('t4'),
            duration: 800
        })
        let postData = {
            num: v.num,
            bk_id: v.bk_id[0]
        }
        receive(postData).then(res => {
            if (res.code == 1) {
                Toast.show({
                    icon: 'fail',
                    content: res.info,
                    duration: 2200
                })
                return false
            }
            Toast.show({
                icon: 'success',
                content: t('t16'),
                duration: 1100
            })
            setTimeout(() => {
                navigate('/Withdraws')//提现记录页
            }, 1500)
        })
    }
    useEffect(() => {
        // getData()
        getData1()
        getCardList()
    }, [])
    return (
        <div className='Withdraw'>
            <div className='header'>
                <div className='backIcon' onClick={() => { navigate('/User') }}>
                    <LeftOutline />
                </div>
                <p>{t('g1')}</p>
            </div>
            <div className='Withdraw_box'>
                <Form layout='horizontal' onFinish={onFinish} >
                    <Form.Item required={false} rules={[{ required: true }]} label={t('cz11')} name="num">
                        <Input placeholder={t("mx11")} clearable/>
                    </Form.Item>
                    <Form.Item >
                        <div className="" style={{textAlign: 'right', fontSize: 14, marginTop: -4}}>{t('mx9')}: <span style={{color:"#0071dc"}}>{orderMoney}</span></div>
                    </Form.Item>

                    <Form.Item label={t('cz12')}  name="bk_id" required={false}
                               rules={[{ required: true, message: t('pcs1')}]} trigger='onConfirm' onClick={(e, pickerRef) => {
                        pickerRef.current?.open();console.log(pickerRef)
                    }}>
                        <Picker
                            cancelText={t('ty2')}
                            confirmText={t('ty1')}
                            columns={[
                                cardList
                            ]}
                        >
                            {(items) => {
                                return (
                                    items.every(item => item === null)
                                        ? <span style={{color: '#ccc'}}>{t('pcs1')}</span>
                                        : <p className="adm-ellipsis" style={{width: '140px', textOverflow: 'ellipsis'}}>
                                            {items.map(item => item?.label ?? t('pcs1')).join('')}
                                        </p>
                                )
                            }}
                        </Picker>
                    </Form.Item>

                    <Form.Item>
                        <Button className="pay-money" type='submit' block color='primary' >
                            {t('ty3')}
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}
